<template>
 <el-cascader v-model="areaArr" :options="options" :props="props" :show-all-levels="false"  @change="chooseArea"></el-cascader>
</template>
<script>
  import { regionData ,CodeToText} from 'element-china-area-data'
  import utils from '@/utils/utils'
 export default({
     data () {
         return {
           props: { multiple: true },
           options: [],
           areaArr:[],
           regionData:regionData,
           areaArray:[]
         }
     },
     props: ['areaList'],
     watch: {
         areaList(newVal, oldVal){
             let appArray=[]
             this.areaArray=newVal
             this.areaArray=this.areaArray.split(',')
             this.areaArray.forEach(item=>{
                 let oneArray=[]
                 let oneitem=item.substring(0,2)
                 oneitem=oneitem+"0000"
                 oneArray.push(oneitem)
                 oneArray.push(item)
                 appArray.push(oneArray)
             })
             this.areaArr=appArray
         }
     },
     created () {
         this.selsectreg()
     },
     mounted () {
     },
     methods: {
         selsectreg(){
              this.regionData.forEach(item=>{
                  item.children.forEach(val=>{
                      this.$delete(val, 'children')
                  })
              })
              this.options=this.regionData
         },
       chooseArea(value) {//区域地址改变

        let newareaArr
        if(!utils.isNull(value)){
            value.forEach(item=>{
                if(utils.isNull(newareaArr)){
                    newareaArr=item[1]
                }else{
                    newareaArr=newareaArr+','+item[1]
                }
            })
        }else{
            newareaArr=""
        }
        this.$emit('queryCascaderclick',newareaArr)


    },
     }
 })
</script>
 <style>
</style>
